import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from './helpers/helpers';

export const donutDocs= { source: { code: `component.DonutChart{
	Config: component.DonutChartConfig{
		Size: component.DonutChartSizeMedium,
		Segments: []component.DonutSegment{
			{
				Count: 3,
				Status: component.NodeStatusOK,
			},
		},
		Labels: component.DonutChartLabels{
			Plural: "Pods",
			Singular: "Pod",
		},
	},
}`
}}

export const donutWithCustomSegmentsDocs= { source: { code: `component.DonutChart{
	Config: component.DonutChartConfig{
		Size: component.DonutChartSizeMedium,
		Segments: []component.DonutSegment{
			{
				Count: 3,
				Status: component.NodeStatusOK,
			},
		},
		Labels: component.DonutChartLabels{
			Plural: "Pods",
			Singular: "Pod",
		},
	},
}`
}}

export const label = {
  plural: 'Pods',
  singular: 'Pod',
};

export const donutChartView = {
  config: {
    segments: [
    {
      count: 3,
      status: 'ok',
    },
    {
      count: 2,
      status: 'warning',
    },
    {
      count: 1,
      status: 'error',
    }],
    labels: label,
    size: 100,
  },
  metadata: {
    type: 'donutChart',
  },
};

export const donutChartView2 = {
  config: {
    segments: [
      {
        count: 1,
        status: 'critical',
        color: 'purple',
        description: 'Critical risk problems'
      },
      {
        count: 3,
        status: 'high',
        color: 'red',
        description: 'High risk problems'
      },
      {
        count: 7,
        status: 'medium',
        color: 'orange',
        description: 'Medium risk problems'
      },
      {
        count: 11,
        status: 'low',
        color: 'green',
        description: 'Low risk problems'
      },
     ],
    labels: {
      plural: 'Risks',
      singular: 'Risk',
    },
    size: 100,
    thickness: 20,
    },
  metadata: {
    type: 'donutChart',
  },
};

export const donutChartView3 = {
  config: {
    segments: [
      {
        count: 8,
        thickness: 30,
        color: '#A435CB',
        description: 'Networking errors'
      },
      {
        count: 18,
        thickness: 20,
        color: '#1FAECD',
        description: 'Errors on client side'
      },
      {
        count: 6,
        thickness: 10,
        color: ' #EBE54D',
        description: 'Server side errors'
      },
     ],
    labels: {
      plural: 'Errors',
      singular: 'Error',
    },
    size: 100,
    thickness: 20,
    },
  metadata: {
    type: 'donutChart',
  },
};

export const DonutStoryTemplate = args => ({
  template: `<div class="main-container" style= "width: 50%; height: 50%; margin: auto;">
                <app-view-donut-chart [view]="view"></app-view-donut-chart>
             </div>`,
  argTypes: argTypesView,
  props: {view: args.view},
});


<h1>Donut chart component</h1>
<h2>Description</h2>

<p>The Donut chart component is used in Octant's application view
to show application health and pod count.</p>
<h2>Standard Donut chart</h2>

<Meta title="Components/Donut" argTypes = { argTypesView } />

Donut chart displays data provided as array of segments inside a circular graph.
Originally Donut chart was used only to visualize the application health,
so segments with <code>error</code> or <code>warning</code> status have by default padded thickness.
The chart is using the <code>description</code> field for tooltip if that's provided,
otherwise it constructs the tooltip based on segment data like in example below.

<Canvas withToolbar>
  <Story name="Donut chart"
         parameters={{ docs: donutDocs }}
         height="400px"
         args= {{ view: donutChartView }}>
    { DonutStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Using custom colors</h2>

By default, segment color is determined based on value of segment status field,
for example segments with <code>error</code> status are displayed with red background.
However, that behavior can be overridden if color info is provided for on a segment level.

<Canvas withToolbar>
  <Story name="Donut chart with custom colors"
         parameters={{ docs: donutWithCustomSegmentsDocs }}
         height="400px"
         args= {{ view: donutChartView2 }}>
    { DonutStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Using variable segment thickness</h2>
It is also possible to change the thickness,
both globally for all segments or individually for each segment like in following example.
Thickness value is trimmed to be inside [2-100] interval,
where 2 is barely visible and 100 turns it to a pie chart.

<Canvas withToolbar>
  <Story name="Donut chart with custom thickness"
         parameters={{ docs: donutWithCustomSegmentsDocs }}
         height="400px"
         args= {{ view: donutChartView3 }}>
    { DonutStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = 'Donut chart'/>
